/**
 * Author: zhjpaul
 * Description: 用于端口流量数据的拼图以及实时流量的呈现，利用Highcharts库
 */


/**
 * 绘制实时流量的折线图
 * 
 * @param  {Array} trafficData 实时流量数据
 * @return {void}
 */

function drawLineChart(trafficData) {
   
   var realTimeTraffic = {};

   realTimeTraffic.title = {
      text: '端口实时流量'   
   };

   realTimeTraffic.subtitle = {
      text: 'Source: Switch'
   };

   realTimeTraffic.xAxis = {
      title: {
         text: 'Time (Second)'
      },
      categories: [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55]
   };

   realTimeTraffic.yAxis = {
      title: {
         text: 'Traffic (GBits)'
      },
      plotLines: [{
         value: 0,
         width: 1,
         color: '#808080'
      }]
   };   

   realTimeTraffic.tooltip = {
      valueSuffix: 'GBits'
   }

   realTimeTraffic.legend = {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
   };

   realTimeTraffic.series =  [
      {
         name: 'Switch',
         data: trafficData
         /*data: [37.0, 36.9, 39.5, 44.5, 48.2, 41.5, 45.2,
            46.5, 43.3, 48.3, 43.9, 49.6]*/
      }
   ];

   $('#RTTModal .modal-body').highcharts(realTimeTraffic);

}

/**
 * 绘制某一端口上出端口流量的饼图
 * 
 * @param  {Array} trafficData 各个出端口栈的流量比例
 * @return {void}
 */

function drawPie(trafficData) {

   var traffic = {};

   traffic.chart = {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false
   };

   traffic.title = {
      text: '各出端口流量占有比例'
   };

   traffic.tooltip = {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
   };

   traffic.plotOptions = {
      pie: {
         allowPointSelect: true,
         cursor: 'pointer',
         dataLabels: {
            enabled: true,
            format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
            style: {
               color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
            }
         }
      }
   };

   traffic.series= [{
      type: 'pie',
      name: 'Browser share',
      data: trafficData
   }];

   $('#pie').highcharts(traffic);  

}

function renderTrafficTable(trafficInfo) {

   var tr = '<tr>' + 
               '<td>' + trafficInfo.outport + '</td>' + 
               '<td>' + trafficInfo.traffic + '</td>' + 
               '<td>' +
                  '<select class="form-control">';

   for (var i = 0, len = gTapPorts.length; i < len; i++) {
      if (gTapPorts[i].value == trafficInfo.tapPort) {
         tr += '<option selected value="' + gTapPorts[i].value + '">' + 
                  gTapPorts[i].text +
               '</option>';
      }
   }

   tr += '</td></tr>';

   $("#table tbody").append(tr);
}

function showPortTraffic(portID) {

   /*
   var trafficData = [
         ['KB310', 40.0],
         ['KB318', 33.0],
         ['Others', 27.0]
   ];
   */
   
   var portInfo = {
      "target_port_id": portID + 1
   };

   getPortTrafficStat(portInfo);

}